<template>
    <div class="home">
        <div class="left" ref="left">
            <!-- FIXME 视频加载完成 视频播放暂停回调 -->
            <HLSPlayer1 :videoConfig="videoConfig" ref="player" v-show="show"></HLSPlayer1>
        </div>
        <div class="right"></div>
    </div>
</template>
<script>
// import HLSPlayer from '@/components/HLSPlayer.vue';
import HLSPlayer1 from '@/components/HLSPlayer1.vue';

export default {
    name: 'Home',
    components: {
        // HLSPlayer,
        HLSPlayer1,
    },
    data() {
        return {
            show: false,
            videoConfig: {
                mainVideo: {
                    width: 800,
                    height: 600,
                    sourceURL: '',
                    name: '我是主视频',
                    perspectiveName: '正面',
                },
                subVideo: {
                    width: 300,
                    height: 180,
                    sourceURL: '',
                    name: '我是副视频',
                    perspectiveName: '侧面',
                },
                common: {
                    isShowSub: true,
                    playBackRate: 1,
                    preload: true,
                    autoPlay: false,
                    controlBarAutoHide: false,
                    type: 'HLS',
                },
            },
        };
    },
    mounted() {
        this.videoConfig.mainVideo.width = this.$refs.left.offsetWidth;
        this.videoConfig.mainVideo.height = this.$refs.left.offsetHeight;

        setTimeout(() => {
            this.videoConfig.mainVideo.sourceURL = `${window.location.origin}/static/video0314/side_1846_.m3u8`;
            this.videoConfig.subVideo.sourceURL = `${window.location.origin}/static/video0314/top_1846_.m3u8`;
            // this.videoConfig.mainVideo.sourceURL = 'http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8';
            // this.videoConfig.subVideo.sourceURL = 'http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8';
            this.show = true;
            this.$nextTick(() => {
                this.$refs.player.init();
            });
        }, 2000);
    },
    method: {},
};
</script>
<style lang="scss" scoped>
.home {
    width: 100%;
    height: 100%;
    .left {
        width: 900px;
        height: 600px;
    }
}
</style>
